<template>
  <view class="tab">
      <view class="tab-box" > 首页 </view>
      <view class="tab-box" @click="clickTab"> 关注 </view>
      <view class="tab-box" @click="clickTab">
        <view class="icon-box">+</view>
      </view>
      <view class="tab-box" @click="clickTab"> 消息 </view>
      <view class="tab-box" @click="clickTab"> 我的 </view>
  </view>
</template>

<script>
  export default {
    name:"tab",
    data() {
      return {
        
      };
    },
    methods:{
      clickTab(){
        uni.showToast({
          title:'禁止！！！',
          icon:'none',
          duration:1500,
          mask:true
        })
      }
    }
  }
</script>

<style>
.tab{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  height:50px;
  z-index:31;
}
.tab-box{
  float:left;
  width:20%;
  height:50px;
  color: #FFFFFF;
  text-align: center;
  line-height: 50px;
  font-size:20px;
}
.icon-box{
  width:60%;
  height:30px;
  font-size:26px;
  background: #FFFFFF;
  color: #000000;
  margin: 7.5px 15%;
  line-height: 30px;
  border-radius: 5px;
  
}
</style>